import React, {Component} from 'react';
import {observer, inject} from "mobx-react";

@inject('loginStore')
@observer
class Upload extends Component {
    render(){
        // 解构从父组件传来的数据
        const {loginStore} = this.props;
        return(
            <div>
                <h1>This is mobx-react!</h1>
                <p>
                    First name:{" "}
                    <textarea
                        type="text"
                        value={loginStore.firstName}
                        // 经常设置值，可以柯力化封装设置函数
                        onChange={e => loginStore.setValue("firstName", e)}
                    />
                </p>
                <p>
                    Last name:{" "}
                    <textarea
                        type="text"
                        value={loginStore.lastName}
                        // 直接赋值可以出发重新渲染，因为有setter
                        onChange={e => loginStore.lastName = e.target.value}
                    />
                </p>
                <p>Full name: {loginStore.fullName}</p>
                <p>
                    <button onClick={loginStore.doReset}>Reset</button>
                </p>
            </div>
        )
    }
}
export default Upload